<h1 class="page_title">
		按钮	</h1>
		<h2>
		1 圆角按钮颜色	</h2>
	<p >
		任何赋予	<code>
		.btn	</code>
类的页面元素都会显示方角按钮样式。通常用在	<code>
		&lt;a&gt;	</code>
 和 	<code>
		&lt;button&gt;	</code>
 页面元素上。追加.radius就会显示css3圆角效果。	</p>
	<div class="codeView bs-docs-example ">
		   	<table class="table  table table-border table-bordered table-striped"
	>
		    	<thead>      	<tr>            <th>按钮</th>
            <th>class=""</th>
            <th>描述</th>
      </tr>
    </thead>
        <tbody >      	<tr>        	<td   >        		<input	 class="btn btn-default  "
 type="button" value="默认" >
        </td>
        	<td   >    <code > 
        btn btn-default    </code>
</td>
        	<td   >带渐变的标准灰色按钮</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-default  "
 type="button" value="圆角效果" >
        </td>
        	<td   >    <code > 
        btn radius btn-default    </code>
</td>
        	<td   >带渐变的标准灰色圆角按钮</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-primary  "
 type="button" value="主要" >
        </td>
        	<td   >    <code > 
        btn radius btn-primary    </code>
</td>
        	<td   >提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-info  "
 type="button" value="信息" >
        </td>
        	<td   >    <code > 
        btn radius btn-info    </code>
</td>
        	<td   >默认样式的替代样式</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-success  "
 type="button" value="成功" >
        </td>
        	<td   >    <code > 
        btn radius btn-success    </code>
</td>
        	<td   >表示成功或积极的动作</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-warning  "
 type="button" value="警告" >
        </td>
        	<td   >    <code > 
        btn radius btn-warning    </code>
</td>
        	<td   >提醒应该谨慎采取这个动作</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-danger  "
 type="button" value="警告" >
        </td>
        	<td   >    <code > 
        btn radius btn-danger    </code>
</td>
        	<td   >表示这个动作危险或存在危险</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-inverse  "
 type="button" value="反向" >
        </td>
        	<td   >    <code > 
        btn radius btn-inverse    </code>
</td>
        	<td   >备用的暗灰色按钮，不依赖于语义和用途<</td>
      </tr>
      	<tr>        	<td   >            	<a class="btn grayBtn" href="#">
        返回    </a>
        </td>
        	<td   >    <code > 
        btn radius grayBtn    </code>
</td>
        	<td   >简化按钮样式, 纯色没有渐变</td>
      </tr>
       	<tr>        	<td   >            		<input	 class="btn radius btn-link  "
 type="button" value="链接" >
        </td>
        	<td   >    <code > 
        btn radius btn-link    </code>
</td>
        	<td   >简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius disabled  "
 type="button" value="禁用" >
        </td>
        	<td   >    <code > 
        btn radius disabled    </code>
</td>
        	<td   >disabled只是让状态看上去像禁用，但实际并没有真正禁用，需要js代码来禁止链接的行为</td>
      </tr>
    </tbody>
      </table>
  	<p class="mt-10" >
		    		<input	 class="btn radius btn-large btn-block btn-primary  "
 type="button" value="btn-block块级按钮，通栏显示" >
  	</p>
	</div>
	<p >
		不支持圆角和背景渐变浏览器，如IE系列，会显示扁平纯色直角效果。	</p>
		<h2>
		2 按钮大小	</h2>
	<p >
		定义了五种规格尺寸	</p>
	<div class="codeView bs-docs-example ">
			<table class="table  table table-border table-bordered table-striped"
	>
		  	<thead>      	<tr>            <th width="20%">按钮</th>
            <th>class=""</th>
      </tr>
  </thead>
        <tbody >      	<tr>        	<td   >            		<input	 class="btn radius btn-primary  btn-large"
 type="button" value="特大按钮" >
        </td>
        	<td   >    <code > 
        btn-large    </code>
</td>
      </tr>
	  	<tr>		  	<td   >		            		<input	 class="btn radius btn-primary  btn-big"
 type="button" value="大按钮" >
		  </td>
		  	<td   >    <code > 
        btn-big    </code>
</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-primary  "
 type="button" value="默认尺寸" >
        </td>
        	<td   ></td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-primary  btn-small"
 type="button" value="小按钮" >
        </td>
        	<td   >    <code > 
        btn-small    </code>
</td>
      </tr>
      	<tr>        	<td   >            		<input	 class="btn radius btn-primary  btn-mini"
 type="button" value="迷你按钮" >
        </td>
        	<td   >    <code > 
        btn-mini    </code>
</td>
      </tr>
    </tbody>
    </table>
	</div>

		<h2>
		3  多元化按钮	</h2>
	<div class="codeView bs-docs-example ">
			
	<table class="table  table table-border table-bordered table-striped"
	>
		  			<thead>      	<tr>                  <th width="33%">按钮</th>
            <th>class=""</th>
        </tr>
    </thead>
        <tbody >      	<tr>        	<td   >            		<a 	 class="btn btn-primary btn-circle btn-xl "
 >
						<i class="glyphicon glyphicon-list">
			</i>
		</a>
            		<a 	 class="btn btn-default btn-circle btn-xl "
 >
						<i class="glyphicon glyphicon-ok">
			</i>
		</a>
        </td>
        	<td   >超大圆形按钮，请添加样式    <code > 
        .btn-circle .btn-xl    </code>
</td>
      </tr>
     	<tr>        	<td   >            		<a 	 class="btn btn-primary btn-circle btn-lg "
 >
						<i class="glyphicon glyphicon-list">
			</i>
		</a>
            		<a 	 class="btn btn-default btn-circle btn-lg "
 >
						<i class="glyphicon glyphicon-ok">
			</i>
		</a>
        </td>
        	<td   >大圆形按钮，请添加样式    <code > 
        .btn-circle .btn-lg    </code>
</td>
      </tr>
      	<tr>        	<td   >            		<a 	 class="btn btn-primary btn-circle "
 >
						<i class="glyphicon glyphicon-list">
			</i>
		</a>
            		<a 	 class="btn btn-default btn-circle "
 >
						<i class="glyphicon glyphicon-ok">
			</i>
		</a>
        </td>
        	<td   >默认大小圆形按钮，请添加样式    <code > 
        .btn-circle    </code>
</td>
      </tr>
      	<tr>        	<td   >            		<a 	 class="btn btn btn-primary btn-xs"
 >
						<i class="fa fa-gear">
			</i>
		</a>
            		<a 	 class="btn btn btn-default btn-sm"
 >
						<i class="fa fa-gear fa-lg">
			</i>
		</a>
            		<a 	 class="btn btn btn-primary "
 >
						<i class="fa fa-gear fa-lg">
			</i>
		</a>
            		<a 	 class="btn btn btn-primary "
 >
						<i class="fa fa-gear fa-lg">
			</i>
		<i class="fa fa-caret-down">
			</i>
		</a>
            		<a 	 class="btn btn btn-primary btn-lg"
 >
						<i class="fa fa-gear fa-lg">
			</i>
		</a>
        </td>
        	<td   >各种尺寸     <code > 
        较小.btn-xs 小.btn-sm 默认.btn-primary 大.btn-lg    </code>
</td>
      </tr>
       	<tr>        	<td   >            		<a 	 class="btn btn btn-default txt-color-red"
 >
						<i class="fa fa-gear fa-lg">
			</i>
		</a>
            		<a 	 class="btn btn btn-default txt-color-greenLight"
 >
						<i class="fa fa-gear fa-lg">
			</i>
		</a>
            	<a 	 class="btn  btn bg-color-blueLight txt-color-magenta"
 >
				<i class="fa fa fa-gear fa-lg">
			</i>
	</a>
            	<a 	 class="btn  btn bg-color-blueDark txt-color-teal"
 >
				<i class="fa fa-gear fa-3x">
			</i>
	</a>
            	<a 	 class="btn  btn bg-color-red txt-color-white"
 >
				<i class="fa fa-gear fa-4x fa-spin">
			</i>
	</a>
        </td>
        	<td   >各种背景颜色的按钮     <code > 
        .btn .bg-color-blueLight .txt-color-magenta    </code>
也可以自行设置文字图标颜色 示例:     <code > 
        .txt-color-red    </code>
</td>
      </tr>
      	<tr>        	<td   >            		<a 	 class="btn btn btn-primary "
 >
						<i class="fa fa-shopping-cart">
			</i>
按钮 		</a>
            	<a 	 class="btn  btn btn-success"
 >
				<i class="fa fa-gear">
			</i>
按钮	<i >
			</i>
	</a>
            	<a 	 class="btn  btn btn-danger"
 >
		按钮	<i >
			</i>
	</a>
            	<div class="btn-group ">
		                		<a 	 class="btn btn btn-default "
 >
						<i class="fa fa-gear">
			</i>
按钮 		</a>
 	<a  data-toggle="dropdown"  class="dropdown-toggle btn btn-default">
		        <span class="caret">
            </span>
	</a>
                	 <ul   class="dropdown-menu ">
                            	<li>
        <a   href="javascript:void(0);" >
        	Action        </a>
    </li>
                    	<li>
        <a   href="javascript:void(0);" >
        	Another action        </a>
    </li>
                    	<li>
        <a   href="javascript:void(0);" >
        	Something else here        </a>
    </li>
                        	<li>
		            	</li>
                   		<li>
        <a   href="javascript:void(0);" >
        	Separated link        </a>
    </li>
                    </ul>
            	</div>
        </td>
        	<td   >图标按钮    <code > 
         图标可以在i上加.fa-shopping-cart等    </code>
</td>
      </tr>
      	<tr>        	<td   >            	<div class="btn-group ">
		                		<a 	 class="btn btn btn-primary "
 >
				按钮		</a>
   	<a  data-toggle="dropdown"  class="dropdown-toggle btn btn-primary">
		        <span class="caret">
            </span>
	</a>
                	 <ul   class="dropdown-menu ">
                            	<li>
        <a   href="javascript:void(0);" >
        	Action        </a>
    </li>
                    	<li>
        <a   href="javascript:void(0);" >
        	Another action        </a>
    </li>
                    	<li>
        <a   href="javascript:void(0);" >
        	Something else here        </a>
    </li>
                        	<li>
		            	</li>
                   		<li>
        <a   href="javascript:void(0);" >
        	Separated link        </a>
    </li>
                    </ul>
            	</div>
            	<div class="btn-group ">
		                        <button class="btn btn-default dropdown-toggle " data-toggle="dropdown">
        动作         <span class="caret">
            </span>
    </button>
                	 <ul   class="dropdown-menu ">
                            	<li>
        <a   href="javascript:void(0);" >
        	Action        </a>
    </li>
                    	<li>
        <a   href="javascript:void(0);" >
        	Another action        </a>
    </li>
                    	<li>
        <a   href="javascript:void(0);" >
        	Something else here        </a>
    </li>
                        	<li>
		            	</li>
                    	<li>
        <a   href="javascript:void(0);" >
        	Separated link        </a>
    </li>
                    </ul>
            	</div>
        </td>
        	<td   >背景颜色和下拉图标添加    <code > 
        .btn-primary .dropdown-toggle    </code>
</td>
      </tr>
    </tbody>
    </table>
	</div>
		<h2>
		4 各种颜色的按钮	</h2>
	<div class="codeView bs-docs-example ">
				        <p class="alert alert-info ">
                               可以给按钮增加Css格式，各种存在的样式都可以加到按钮上来形成独特风格的按钮 
        <strong>
        示例::    </storng>
    	        <code > 
        	    	.btn .bg-color-blueLight .txt-color-white	        </code>
    
	    </p>
        <ul   class="demo-btns" >
                <li    >
                	    <a class="btn txt-color-white bg-color-blueLight" href="javascript:void(0);">
        		.bg-color-blueLight	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-blue" href="javascript:void(0);">
        		.bg-color-blue	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-teal" href="javascript:void(0);">
        		.bg-color-teal	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-blueDark" href="javascript:void(0);">
        		.bg-color-blueDark	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-green" href="javascript:void(0);">
        		.bg-color-green	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-greenDark" href="javascript:void(0);">
        		.bg-color-greenDark	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-greenLight" href="javascript:void(0);">
        		.bg-color-greenLight	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-purple" href="javascript:void(0);">
        		.bg-color-purple	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-magenta" href="javascript:void(0);">
        		.bg-color-magenta	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-pink" href="javascript:void(0);">
        		.bg-color-pink	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-pinkDark" href="javascript:void(0);">
        		.bg-color-pinkDark	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-yellow" href="javascript:void(0);">
        		.bg-color-yellow	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-orange" href="javascript:void(0);">
        		.bg-color-orange	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-red" href="javascript:void(0);">
        		.bg-color-red	    </a>
        </li>
        <li    >
                	    <a class="btn txt-color-white bg-color-redLight" href="javascript:void(0);">
        		.bg-color-redLight	    </a>
        </li>
    	<li>
		        	    <a class="btn txt-color-dark btn-default" href="javascript:void(0);">
        		.btn-default	    </a>
    	</li>
    </ul>
	</div>


 		<h3>
		组件包	</h3>
 	<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.button包即可</span></pre>
